@import (reference) "../../color.less";
@import (reference) "./trade-common.less";

.trade(
  @main-background-color,
  @title-bar-background-color,
  @content-background-color,
  @main-font-color,
  @second-font-color
) {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 600px;
  background: @main-background-color;
  transition: all .6s;
  .trade-content {
    display: flex;
    flex-direction: row;
    height: calc(100% - @top-module-height - @module-margin);
    margin-top: @module-margin;
    .trade-left-column {
      display: flex;
      flex-direction: column;
      width: @left-module-width;
      height: 100%;
    }

    .trade-middle-column {
      display: flex;
      flex-direction: column;
      margin-left: @module-margin;
      width: @middle-module-width;
    }
    .trade-right-column {
      display: flex;
      flex-direction: column;
      margin-left: @module-margin;
      width: @right-module-width;
    }
    .trade-column-bottom {
      height: @bottom-module-height;
      margin-top: @module-margin;
    }

    .trade-column-content-title {
      display: flex;
      flex-direction: row;
      height: @module-title-container-height;
      font-size: 14px;
      color: @second-font-color;
      align-items: center;
      background: @title-bar-background-color;
      &[datatype="single"] {
        padding-left: 12px;
      }
      .trade-column-content-title-tab {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 100%;
        padding: 0 20px;
        border-top: 2px solid transparent;
        cursor: pointer;
        transition: all .2s;
        &[datatype="selected"] {
          background: @content-background-color;
          color: @main-font-color;
          border-top-color: @main-blue-color;
        }
      }
    }
  }
}

.trade-night {
  .trade(
    @main-background-color-night,
    @title-bar-background-color-night,
    @content-background-color-night,
    @main-font-color-night,
    @second-font-color-night
  )
}

.trade-day {
  .trade(
    @main-background-color-day,
    @title-bar-background-color-day,
    @content-background-color-day,
    @main-font-color-day,
    @second-font-color-day
  )
}

